<template>
  <div class="mermaidContainer"></div>
</template>

<script>
import mermaid from 'mermaid'
mermaid.initialize({ startOnLoad: true }); // 初始化Mermaid，如果不需要自动渲染可以跳过

export default {
  name: 'SequenceDiagram',
  data(){
    return{
      list:[
        {
          order:1,
          field:'flow1',
          optionName:'流程1',
          optionValue:'你吃饭了吗',
          sender:'小明',
          receiver:'小妹',
        },
        {
          order:2,
          field:'flow2',
          optionName:'流程2',
          optionValue:'你吃饱了吗',
          sender:'小花',
          receiver:'小宇',
        },
        {
          order:3,
          field:'flow3',
          optionName:'流程3',
          optionValue:'你要去消消食吗',
          sender:'小花',
          receiver:'小宇',
        }
      ],
      diagramCode: `sequenceDiagram
        participant Alice
        participant Bob
        Alice->>Bob: Hello Bob, how are you?
        Bob-->>Alice: Fine thanks, and you?`
    }
  },
  mounted() {
    // this.diagramCode=`sequenceDiagram
    //  ${this.list[0].sender}->>${this.list[0].receiver}: ${this.list[0].optionValue}
    //  ${this.list[1].sender}->>${this.list[1].receiver}: ${this.list[1].optionValue}
    // `

    // let str = ''
    // this.list.forEach(item=>{
    //   str +=`${item.sender}->>${item.receiver}: ${item.optionValue}<br/>`
    // })
    //
    // this.diagramCode=`sequenceDiagram
    // ${str}
    // `
    //
    // console.log(this.diagramCode,999999999)


//     this.diagramCode=`sequenceDiagram
//         participant Alice
//         participant Bob
//         Alice->>John: Hello John, how are you?
//         loop HealthCheck
//             John->>John: Fight against hypochondria
//         end
//         Note right of John: Rational thoughts <br/>prevail!
//         John-->>Alice: Great!
//         John->>Bob: How about you?
//         Bob-->>John: Jolly good!
// `
    this.renderDiagram();
  },
  methods:{
    renderDiagram() {
      let element = document.querySelector(".mermaidContainer")
      mermaid.render('mermaidContainer', this.diagramCode, svg => {
        // 这里可以处理渲染后的SVG，但通常不需要（除非你要自定义DOM操作）
        // console.log(svg,'svg svg')
        element.innerHTML = svg
      });

    },
  }
}

</script>

<style scoped>
.mermaidContainer{

  width: 100%;
  height: 100%px;
  border: 1px solid #cccccc;
  //background: #1B1B1F;
}
</style>
